<template>
	<view 
	class="verticalSwiper-2"
	:style="item.compStyle"
	:class="item.compClass">
	<!-- '/static/test/welfare.png' -->
		<image :src="getLeftImageConfig.src" mode="aspectFill" class="left-img" @tap.stop="$emit('click', getLeftImageConfig)"></image>
		<swiper circular :autoplay="getRightSwiper.autoplay" :interval="getRightSwiper.interval" class="right-swiper" vertical>
			<swiper-item v-for="(ite, index) in getRightSwiper.list" :key="index">
				<viewRowBetween :item="ite"></viewRowBetween>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import viewRowBetween from '../viewRowBetween/viewRowBetween.vue';
	import QSSuperComponentCustomCompMixin from '../QSSuperComponentCustomCompMixin.js'
	export default {
		components: {viewRowBetween},
		mixins: [QSSuperComponentCustomCompMixin({componentType:'bargainBuy-1'})],
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		computed: {
			getLeftImageConfig() {
				return this.item?.attributes?.leftImageConfig || {};
			},
			getRightSwiper() {
				return this.item?.attributes?.rightSwiper || {}
			}
		},
	}
</script>

<style scoped>
	.verticalSwiper-2{
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 25rpx;
	}
	.left-img{
		height: 40rpx;
		width: 40rpx;
		margin-right: 22rpx;
	}
	.right-swiper{
		flex: 1;
		height: 100%;
	}
</style>
